{extend name="../../base/view/common/base" /}
{block name="style"}
<style>
    .layui-table-view .layui-table thead th {
        background-color: #f2f2f2;
    }
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-page">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form toolbar" id="searchForm">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <input type="text" name="keywords" placeholder="输入文档名称" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <input type="text" name="case_code" placeholder="输入案号" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <select name="doc_type">
                                    <option value="">全部文档类型</option>
                                    <option value="1">起诉状</option>
                                    <option value="2">答辩状</option>
                                    <option value="3">证据材料</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="searchForm">
                                    <i class="layui-icon">&#xe615;</i>搜索
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="resetBtn">
                                    <i class="layui-icon">&#xe669;</i>清空
                                </button>
                            </div>
                        </div>
                    </form>
                    <table id="docTable" lay-filter="docTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

<!-- 脚本 -->
{block name="script"}
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm tool-add" data-href="/lawcase/casedoc/add">+ 添加文档</button>
    </div>
</script>
<script type="text/html" id="column-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

<script>
    function gouguInit() {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var tool = layui.tool;
        layui.use(['table', 'form', 'jquery', 'layer', 'tool'], function() {
            

            // 初始化表格
            table.render({
                elem: '#docTable',
                url: '/lawcase/casedoc/index',
                toolbar: '#toolbar',
                cols: [[
                    {field: 'case_code', title: '案号', width: 180, align: 'center'},
                    {field: 'doc_type_text', title: '文档类型', minWidth: 150},
                    {field: 'title', title: '文档名称', minWidth: 150},
                    {title: '文档列表', minWidth: 300, templet: function(d){
                        if(!d.files || !d.files.length) return '<div class="doc-list">暂无文件</div>';
                        return '<div class="doc-list">' + 
                            d.files.map(file => 
                                '<div class="doc-item">' + (file.name || file.title || '未命名文件') + '</div>'
                            ).join('') + '</div>';
                    }},
                    {field: 'uploader_name', title: '上传人', width: 120},
                    {field: 'update_time', title: '更新时间', width: 150, sort: true},
                    {title: '操作', width: 150, align: 'center', toolbar: '#column-toolbar'}
                ]],
                page: true,
                parseData: function(res){
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.total,
                        "data": res.data.data
                    };
                },
                emptyText: '<div style="padding:15px 0;">暂无数据</div>',
                defaultToolbar: ['filter', 'print', 'exports'],
                skin: 'line',
                even: true,
                done: function(res, curr, count){
                    // 分组显示处理
                    $('.layui-table-body tr').each(function(){
                        var $tr = $(this);
                        if($tr.find('.doc-list .doc-item').length > 1) {
                            $tr.find('.doc-list').css('display', 'flex').css('flex-direction', 'column');
                        }
                    });
                }
            });
        });

        // 搜索表单提交
        form.on('submit(searchForm)', function(data) {
            table.reload('docTable', {
                where: data.field
            });
            return false;
        });

        // 重置按钮
        $('#resetBtn').on('click', function() {
            $('#searchForm')[0].reset();
            table.reload('docTable', {
                where: {
                    keywords: '',
                    case_code: '',
                    doc_type: ''
                },
                page: {
                    curr: 1 // 重置到第一页
                }
            });
        });

        // 工具栏事件
        table.on('toolbar(docTable)', function(obj) {
            if (obj.event === 'tool-add') {
                layer.open({
                    type: 2,
                    title: '添加文档',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['800px', '90%'],
                    content: '/lawcase/casedoc/add'
                });
            }
        });
        
        // 添加文档按钮事件监听
        table.on('toolbar(docTable)', function(obj){
            if(obj.event === 'add'){
                tool.side("/lawcase/casedoc/add", '添加文档');
            }
        });

        // 行工具事件
        table.on('tool(docTable)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '编辑文档',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['800px', '90%'],
                    content: '/lawcase/casedoc/edit?id=' + data.id
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除该文档吗？', function(index) {
                    $.post('/lawcase/casedoc/delete', {id: data.id}, function(res) {
                        if (res.code === 0) {
                            layer.msg(res.msg, {icon: 1});
                            table.reload('docTable');
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
    };
</script>
{/block}